<template>
  <div class='container'>
    <div class="articles-container">
      <el-card>
<!--搜索区域-->
         <el-form ref="form" :model="page" label-width="80px" :inline="true">
           <el-form-item label="标签名称">
             <el-input v-model="page.tags" placeholder="请输入"></el-input>
           </el-form-item>
           <el-form-item label="城市">
             <el-select v-model="page.province" placeholder="请选择城市" @focus="provinceGet">
               <el-option
                 v-for="(item,index) in province"
                 :key="index"
                 :label="item"
                 :value="item">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="地区">
             <el-select v-model="page.city" placeholder="请选择地区" @focus="cityGet">
               <el-option
                 v-for="(item,index) in cityName"
                 :key="index"
                 :label="item"
                 :value="item">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="企业简称">
             <el-input v-model="page.shortName" placeholder="请输入"></el-input>
           </el-form-item>
           <el-form-item label="状态" >
             <el-select v-model="page.state" placeholder="请选择">
               <el-option label="启用" value="1"></el-option>
               <el-option label="禁用" value="0"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item>
             <el-button size="mini" @click="resetForm">清除</el-button>
             <el-button type="primary" size="mini" @click="searchBtn">搜索</el-button>
           </el-form-item>
         </el-form>
          <el-row type="flex" style="margin-bottom: 15px" justify="end">
            <el-col :span="2">
              <el-button icon="el-icon-edit" type="success" size="small" @click="addUser">新增用户</el-button>
            </el-col>
          </el-row>
<!--        提示-->
        <el-alert
          style="margin-bottom: 10px"
          :title="`共${page.counts}条记录`"
          type="info"
        :closable="false">
        </el-alert>
<!--        表单区域-->
        <el-table
          v-loading="loading"
          :data="list"
          style="width: 100%"
          :header-cell-style="{textAlign: 'center'}"
          :cell-style="{ textAlign: 'center' }"
          >
          <el-table-column
            type="index"
            label="序号"
          >
          </el-table-column>
          <el-table-column
            label="企业编号"
            prop="number"
          >
          </el-table-column>
          <el-table-column
            label="企业简称"
            prop="shortName"
          >
          </el-table-column>
          <el-table-column
            label="标签"
          prop="tags">
          </el-table-column>
          <el-table-column
            label="创建者"
            prop="username"
          >
          </el-table-column>
          <el-table-column
            label="创建日期"
            prop="addDate"
          >
          </el-table-column>
          <el-table-column
            label="备注"
            prop="remarks"
          >
          </el-table-column>
          <el-table-column
            label="状态"
          >
            <template v-slot="{row}">
              {{row.state===0?'禁用':'启用'}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          width="180"
          >
            <template v-slot="{row}">
              <el-button type="primary" size="medium" icon="el-icon-edit" @click="editBtn(row.id)" plain circle />
              <el-button @click="changeState(row.id,row.state)" :type="row.state===1?'warning':'success'" size="medium" :icon="row.state===1?'el-icon-close':'el-icon-check'" plain circle />
              <el-button type="danger" size="medium" icon="el-icon-delete" plain circle @click="delBtn(row.id)"/>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页-->
        <el-row type="flex" justify="end" style="margin-top: 15px">
          <el-col :span="8">
            <PageTool :total="page.counts" :paginationPage="page.page"
                      :paginationPagesize="page.pagesize"
                      @pageSizeChange="pageSizeChange"
                      @pageChange="pageChange"/>
          </el-col>
        </el-row>
      </el-card>

<!--      添加用户-->
      <CompanysAdd ref="addRef" :title-info="titleInfo" @getlist="getlist"/>
    </div>
  </div>
</template>

<script>
import { disabled, list, remove } from '@/api/hmmm/companys'
import PageTool from '@/module-manage/components/page-tool'
import { citys, provinces } from '@/api/hmmm/citys'
import CompanysAdd from '@/module-hmmm/components/companys-add'

export default {
  components: {
    PageTool,
    CompanysAdd
  },
  data () {
    return {
      titleInfo: {
        text: '',
        pageTitle: ''
      },
      cityName: [],
      province: [],
      loading: false,
      page: {
        page: 1,
        pagesize: 10,
        counts: null,
        pages: null,
        tags: null,
        province: null,
        city: null,
        shortName: null,
        state: null
      },
      list: []
    }
  },

  created () {
    this.getlist()
  },

  methods: {
    async delBtn (id) {
      await this.$confirm('是否删除')
      await remove({ id })
      this.$message.success('删除成功')
      await this.getlist()
    },
    async changeState (id, state) {
      await this.$confirm('是否修改状态')
      await disabled({
        id: id,
        state: state === 1 ? 0 : 1
      })
      this.$message.success('修改状态成功')
      await this.getlist()
    },
    editBtn (id) {
      this.titleInfo.text = '修改'
      this.titleInfo.pageTitle = '用户'
      this.$refs.addRef.getId(id)
      this.$refs.addRef.dialogFormV()
    },
    addUser () {
      this.titleInfo.text = '新增'
      this.titleInfo.pageTitle = '用户'
      this.$refs.addRef.dialogFormV()
    },
    cityGet () {
      this.cityName = citys(this.form.province)
    },
    provinceGet () {
      this.province = provinces()
    },
    async searchBtn () {
      this.page.page = 1
      await this.getlist()
    },
    resetForm () {
      this.$refs.form.resetFields()
      this.page = {
        page: 1,
        pagesize: 10,
        counts: null,
        pages: null,
        tags: null,
        province: null,
        city: null,
        shortName: null,
        state: null
      }
    },
    pageSizeChange (pageSize) {
      this.page.pagesize = pageSize
      this.getlist()
    },
    pageChange (pageNum) {
      this.page.page = pageNum
      this.getlist()
    },
    async getlist () {
      this.loading = true
      const { data } = await list(this.page)
      this.loading = false
      this.page.counts = data.counts
      this.page.pages = data.pages
      this.list = data.items
    }
  }
}
</script>

<style scoped lang='less'>
.articles-container{
  padding: 10px;
}
</style>
